<template>
	<div class="content">
		<div class="taber_top">
			<div
				class="item_box"
				v-for="(item, index) in taberTop"
				:key="item.isF"
				@click="chengTop(item.isF)"
				:class="{ isf: item.isF == inTaber ? true : false }"
			>
				{{ item.title }}
			</div>
		</div>

		<div class="taber_content">
			<!-- 全口径编目 -->
			<div v-if="inTaber == 1">
				<kouJibm :message="message" />
			</div>
			<!-- 数字化应用开发方案 -->
			<div v-if="inTaber == 2">
				<kouDataDev :message="message" />
			</div>
			<!-- 资金测算明细 -->
			<div v-if="inTaber == 3">
				<totalTable :tableData="message?.calculate" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import kouJibm from './component/kouJibm.vue';
import kouDataDev from './component/kouDataDev.vue';
import kouDeta from './component/kouDeta.vue';
import totalTable from './component/totalTable.vue';

import { toRefs, defineProps, ref } from 'vue';

const props = defineProps({
	message: Object,
});

const taberTop = ref([
	{
		title: '全口径编目',
		isF: 1,
	},
	{
		title: '数字化应用开发方案',
		isF: 2,
	},
	{
		title: '资金测算明细',
		isF: 3,
	},
]);
let inTaber = ref(1);
const chengTop = (isF: any) => {
	inTaber.value = isF;
};

const { message } = toRefs(props);
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	.taber_top {
		display: flex;
		.item_box {
			padding: 10px;
			border: 1px solid #ccc;
			cursor: pointer;
			background-color: #ffffff;
		}
		.isf {
			color: #58a0fd;
		}
	}

	.taber_content {
		background-color: #ffffff;
		margin-top: 10px;
		padding: 10px 15px;
	}
}
</style>
